 /*
 * @description: 售后维权列表
 * @Author: along
 * @Date: 2020-10-23
 * @Last Modified by: along
 * @Last Modified time: 2020-10-23
 */
<template>
    <div class="goodAfterProtection">
        <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
        >
            <el-tab-pane
                label="全部订单"
                name="99"
            />
            <el-tab-pane
                label="仅退款"
                name="1"
            />
            <el-tab-pane
                label="退货退款"
                name="2"
            />
            <el-tab-pane
                label="换货"
                name="3"
            />
        </el-tabs>
        <div class="filterTab">
            <div class="filter-wrap">
                <p class="filter-names">
                    订单编号
                </p>
                <el-input
                    v-model="filterData.order_no"
                    placeholder="请输入订单编号"
                    size="small"
                    clearable
                    suffix-icon="el-icon-search"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
            <div class="filter-wrap">
                <p class="filter-names">
                    用户昵称
                </p>
                <el-input
                    v-model="filterData.phone"
                    placeholder="请输入昵称"
                    size="small"
                    clearable
                    suffix-icon="el-icon-search"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                />
            </div>
            <div class="filter-wrap">
                <p class="filter-names">
                    店铺名称
                </p>
                <el-select
                    v-model="filterData.shop_title"
                    filterable
                    remote
                    clearable
                    reserve-keyword
                    placeholder="请输入商家店铺"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    size="small"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in suggestList"
                        :key="item.shop_title"
                        :label="item.shop_title"
                        :value="item.shop_title"
                    />
                </el-select>
            </div>
            <div class="filter-wrap">
                <p class="filter-names">
                    公司名称
                </p>
                <el-select
                    v-model="filterData.company_name"
                    filterable
                    remote
                    clearable
                    reserve-keyword
                    placeholder="请输入商家店铺"
                    :remote-method="remoteMethod2"
                    :loading="loading"
                    size="small"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in suggestList2"
                        :key="item.hire_no"
                        :label="item.company_name"
                        :value="item.hire_no"
                    />
                </el-select>
            </div>
            <div class="filter-wrap">
                <p class="filter-names">
                    售后状态
                </p>
                <el-select
                    v-model="filterData.refund_status"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in refundList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <!-- <div class="filter-wrap">
                <p class="filter-names">
                    退款类型
                </p>
                <el-select
                    v-model="filterData.type"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in typeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div> -->
            <div class="filter-wrap">
                <p class="filter-names">
                    创建时间
                </p>
                <el-date-picker
                    v-model="date"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="small"
                    @change="getTableData(1)"
                    :default-time="['00:00:00', '23:59:59']"
                    :style="{width: '350px'}"
                />
            </div>
        </div>

        <!-- table -->
        <table-protection
            ref="protection"
            :table="tableData"
            @update="updateTable"
        />

        <!-- /分页 -->
        <div class="pagination-wrapper clearfixNew">
            <el-pagination
                background
                :current-page.sync="page.now_page"
                :page-size="page.page_size"
                layout="total, prev, pager, next, jumper"
                :total="page.total_count"
                @current-change="getTableData"
            />
        </div>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import tableProtection from '@/components/order/table-protection.vue';
import imgPreview from '@/components/common/img-preview';

const FILTER = {
    order_no: '',//订单编号
    phone: '',//手机号
    shop_title: '',
    company_name: '',
    refund_status: 99,//退款状态 99:全部,1:申请中,11:退货申请审核通过,2:申请通过,-1:申请不通过
    type: 99
};

const DATA = {
    date: [],//创建时间
    refundList: [
        {value: 99, label: '全部'},
        {value: 1, label: '售后待处理'},
        {value: 11, label: '商家同意售后申请'},
        {value: 12, label: '买家已退货，待商家确认收货'},
        {value: 13, label: '等待商家发货'},
        {value: 14, label: '商家已发货'},
        {value: 15, label: '换货待买家签收'},
        {value: 101, label: '售后处理进行中'},
        {value: 102, label: '售后完成'},
        {value: 103, label: '售后关闭'},
        {value: 104, label: '用户撤销申请'},
    ],//退款状态列表
    typeList: [{value: 99, label: '全部'},{value: 1, label: '仅退款'},{value: 2, label: '退货退款'}]
};

export default {
    components: {
        tableProtection,
        imgPreview
    },
    data () {
        return {
            ...DATA,
            filterData: {
                ...FILTER
            },
            activeName: '99',//订单退款类型 99:全部, 1:仅退款, 2:退货退款 3换货
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            loading: false,
            suggestList: [],//店铺名称列表
            suggestList2: [],//公司名称列表
        };
    },
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '订单管理'},{title: '售后维权'}]);
        this.getTableData();
    },
    methods: {
        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/shop_goods_order_cancel_apply%5Cget_list', {
                page_id: page || this.page.now_page,
                order_no: this.filterData.order_no,
                type: this.activeName,
                student_true_name: this.filterData.phone,
                status: this.filterData.refund_status,
                shop_keyword: this.filterData.shop_title,
                company_name: this.filterData.company_name,
                create_start_time: this.date === null ? '' : (this.date.length > 0 ? (new Date(this.date[0]).getTime() / 1000) : ''),
                create_end_time: this.date === null ? '' : (this.date.length > 0 ? (new Date(this.date[1]).getTime() / 1000) : '')
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 搜索店铺名称
         */
        remoteMethod (query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getSuggest(query);
                }, 200);
            }
        },

        /**
         * @description 搜索公司名称
         */
        remoteMethod2 (query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getSuggest2(query);
                }, 200);
            }
        },

        /**
         * @description 获取商家店铺数据列表
         */
        getSuggest (keyword) {
            this.$post('/student/shop%5Csuggest', {
                keyword: keyword
            }, resp => {
                if (resp.code == 1) {
                    this.suggestList = resp.data.list;
                }
            });
        },

        /**
         * @description 获取公司名称数据列表
         */
        getSuggest2 (keyword) {
            this.$post('/student/shop%5Ccompany_suggest', {
                keyword: keyword
            }, resp => {
                if (resp.code == 1) {
                    this.suggestList2 = resp.data.list;
                }
            });
        },

        /**
         * @description 切换订单类型
         */
        handleClick () {
            this.getTableData(1);
        },

        /**
         * @description 更新表格数据
         */
        updateTable () {
            this.getTableData();
        }
    }
};
</script>

<style lang="less" scoped>
.goodAfterProtection {
    width: 100%;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 24px 0px 24px;
    .header {
        color: #333;
        font-size: 18px;
        font-weight: 500;
        margin: 24px 0 15px 0;
    }
    .filterTab {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 15px;
        .filter-wrap {
            display: flex;
            margin: 0 20px 24px 0;
            height: 32px;
            align-items: center;
            .filter-names {
                width: auto;
                white-space: nowrap;
                color: #333;
                font-size: 14px;
                margin-right: 16px;
            }
        }
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 20px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
</style>

<style lang="less">
.goodAfterProtection {
    .el-tabs__item {
        box-shadow: none !important;
    }
}
</style>
